
import React,{useState,useEffect} from 'react'
import BraftEditor from 'braft-editor'
import utils from '@utils'
import 'braft-editor/dist/index.css'
import './index.css'

const App = (props)=>{
  let {
  	url,
  	fileName="file",
  	className='',
  	excludeControls=[
	    'letter-spacing',
	    'line-height',
	    'clear',
	    'headings',
	    'list-ol',
	    'list-ul',
	    'remove-styles',
	    'superscript',
	    'subscript',
	    'hr',
	    'text-align'
	  ]
} = props||{}
  let [editorVal,setEditorVal] = useState(BraftEditor.createEditorState(null))
  
  let preview = () => {
    if (window.previewWindow) {
      window.previewWindow.close()
    }
    window.previewWindow = window.open()
    window.previewWindow.document.write(buildPreviewHtml())
    window.previewWindow.document.close()
  }
  let buildPreviewHtml  = () => {
    return `
      <!Doctype html>
      <html>
        <head>
          <title>Preview Content</title>
          <style>
            html,body{
              height: 100%;
              margin: 0;
              padding: 0;
              overflow: auto;
              background-color: #f1f2f3;
            }
            .container{
              box-sizing: border-box;
              width: 414px;
              height:736px;
              margin: 30px auto;
              padding: 30px 15px;
              overflow: scroll;
              background-color: #fff;
              border-right: solid 1px #eee;
              border-left: solid 1px #eee;
            }
            .container img,
            .container audio,
            .container video{
              max-width: 100%;
              height: auto;
            }
            .container p{
              white-space: pre-wrap;
              min-height: 1em;
            }
            .container pre{
              padding: 15px;
              background-color: #f1f1f1;
              border-radius: 5px;
            }
            .container blockquote{
              margin: 0;
              padding: 15px;
              background-color: #f1f1f1;
              border-left: 3px solid #d1d1d1;
            }
          </style>
        </head>
        <body>
          <div class="container">${editorVal.toHTML()}</div>
        </body>
      </html>
    `
  }
  const extendControls = [
    {
      key: 'custom-button',
      type: 'button',
      text: '预览',
      onClick: preview
    }
  ]
  //富文本图片上传服务器
  let myUploadFn = (param) => {
    let data = new FormData()
    data.append(fileName,param.file)
    utils.form(url,data)
    .then(res=>{
      if(res.errorCode==0){
        param.success({
          url: res.result,
        })
      }
    })
  }

  //富文本内容编辑
  let handleChange = (editorState) => {
    setEditorVal(editorState)
  }
  // 内容改变修改编辑器
  useEffect(()=>{
    setEditor(<div className={'group-editor-border '+className}>
      <BraftEditor value={editorVal} excludeControls={excludeControls} media={{uploadFn: myUploadFn}}
      extendControls={extendControls} onChange={handleChange}/>
    </div>)
  },[editorVal])

  let [Editor,setEditor]=useState(()=>{
    return <div className={'group-editor-border '+className}>
      <BraftEditor value={editorVal} excludeControls={excludeControls} media={{uploadFn: myUploadFn}}
      extendControls={extendControls} onChange={handleChange}/>
    </div>
  })
  return {Editor,setEditorVal,editorVal,createEditorState:BraftEditor.createEditorState}
}

export default App